<template>
  <div class="content" flex>
    <div class="left" @click.stop="menuShow = true">{{ activeItem.community||'下拉菜单' }}
      <transition name="el-zoom-in-top">
        <ul v-show="menuShow" class="menu warning_scroll_layout">
          <li v-for="item in menuOptions" :key="item.id" :class="item.id === activeItem.id && 'active'||''" @click="handleMenuItemClick(item)">
            {{ item.community }}
          </li>
        </ul>
      </transition>
      <!-- <ul v-show="menuOptions[activeIndex].children && menuOptions[activeIndex].children.length" ref="childMenu" class="menu warning_scroll_layout child">
        <li v-for="(item,index) in menuOptions" :key="index" :class="index === activeIndex && 'active'||''" @click="handleMenuItemClick($event,index)">
          {{ item.key }}
        </li>
      </ul> -->
    </div>

  </div>
</template>

<script>
import { gridList } from '@/api/community.js'
export default {
  // components: { Modal },
  data() {
    return {
      menuShow: false,
      activeItem: {},
      menuOptions: [],
      tableData: {}
    }
  },
  created() {

  },
  mounted() {
    document.addEventListener('click', e => {
      this.menuShow = false
    })

    this.$eventBus.$on('mapCreated', this.handleMapCreated)
  },
  destroyed() {
    this.$eventBus.$off('mapCreated')
  },
  methods: {
    handleMenuItemClick(item) {
      this.activeItem = item
      this.$eventBus.$emit('changeCommunity', item)
      const found = this._markers.find(subItem => subItem.Ce.label.key === item.community)
      const { lat, lng } = found.Ce.position
      setTimeout(() => {
        this._mapInstance.setCenter([lng, lat])
      }, 500)
    },
    handleMapCreated(mapInstance, placeSearch, _AMap, _markers) {
      gridList().then(res => {
        this.menuOptions = res.data
        this.menuOptions.find(item => item.community === '新洲社区').community = '新州社区'
        this._mapInstance = mapInstance
        this._placeSearch = placeSearch
        this._AMap = _AMap
        this._markers = _markers
        this.handleMenuItemClick(this.menuOptions.find(item => item.id === 13))
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  background: none !important;
  margin: 35px 40px;
  font-size: 28px;
  color: #bfdaff;

  .left {
    background: url("~@/assets/img_qingqin/module6/search_bg.png") !important;
    background-repeat: no-repeat !important ;
    background-size: 100% 100%;
    height: 110px;
    line-height: 110px;
    width: 361px;
    // text-align: right;
    padding-left: 160px;
    padding-top: 15px;
    padding-right: 50px;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;

    .icon {
      position: absolute;
      right: 30px;
      top: 56px;
    }
    // .icon{
    //   position: absolute;
    //   right: 10px;
    //   top: 0;
    //   font-size: 50px;
    //   color: #39FFF5;
    // }
    .menu {
      list-style: none;
      background: url("~@/assets/img_qingqin/module6/menu_bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: absolute;
      left: 100px;
      width: 250px;
      padding: 0;
      text-align: center;
      line-height: 64px;
      margin-top: 0;
      padding-bottom: 12px;
      height: 500px;
      &.child {
        left: 400px;
        // top: 300px;
      }
      & > li {
        margin-top: 15px;
        &.active,
        &:hover {
          background: url("~@/assets/img_qingqin/module6/item_active.png")
            no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
.right {
  background: url("~@/assets/img_qingqin/module6/search_right_bg.png") !important;
  background-repeat: no-repeat !important ;
  background-size: 100% 100%;
  height: 105px;
  line-height: 90px;
  width: 514px;
  margin-top: 25px;
  margin-left: 50px;
  padding-left: 30px;
  position: relative;
  .input {
    background: none;
    color: #bfdaff;
    border: none;
    line-height: 75px;
    outline-width: 0;
    font-size: 28px;
  }
  .icon {
    position: absolute;
    right: 20px;
    top: 25px;
    color: #39fff5;
    opacity: 0.6;
    &:hover {
      cursor: pointer;
      opacity: 1;
    }
  }

  .custem {
    position: absolute;
  }
}
</style>
